<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .body{
            width:100%;
            height:100%;
            display: flex;
            flex-wrap: nowrap;
            background: #ddd;
        }
        .container{
            width:100%;
            height:100%;
            position: relative;
            background: #f1f1f1;
        }
        .box{
            width:600px;
            height:400px;
            background: #fff;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .box span{
            width:5px;
            height:5px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="body">
    <div class="left" style="flex: 0 0 10px;width: 10px;"></div>
    <div class="container" id="container">
        <div class="box" id="box">
            <span></span>
        </div>
    </div>
</div>
<script>
    const el = document.getElementById('box')
    const el2 = document.getElementById('container')

    console.log(el.offsetLeft,el.offsetTop)
    console.log(el2.offsetLeft,el2.offsetTop)
</script>
</body>
</html>